<template>
	<basic-container>
		<form id="form1">
			<table border="1" width="300" id="tb01">
				<tr>
					<td width="133" id="mtb001">
						<font face="黑体" color="#FF0000" size="3"><u>&nbsp;《表单一》&nbsp;</u></font>
					</td>
				</tr>
			</table>

			<table border="1" width="300" cellspacing="0">
				<tr>
					<td width="66" height="16" style="border:solid 1px black">
						<font color="#0000FF">A</font>
						<font color="#0000FF">等</font>
					</td>
					<td width="51" height="16" style="border:solid 1px black">
						<font color="#0000FF">B</font>
						<font color="#0000FF">等</font>
					</td>
					<td width="51" height="16" style="border:solid 1px black">
						<font color="#0000FF">C</font>
						<font color="#0000FF">等</font>
					</td>
				</tr>
				<tr>
					<td width="66" height="16" style="border:solid 1px black">
						A
						<sub>01</sub>
					</td>
					<td width="80" height="12" style="border:solid 1px black">中-001</td>
					<td width="51" height="12" style="border:solid 1px black">
						C1
						<sup>x</sup>
					</td>
				</tr>
				<tr>
					<td width="66" height="16" style="border:solid 1px black">
						A
						<sub>02</sub>
						Φ
					</td>
					<td width="80" height="16" style="border:solid 1px black">日-スの</td>
					<td width="51" height="16" style="border:solid 1px black"><font face="Vernada">11111</font></td>
				</tr>
				<tr>
					<td width="66">
						A
						<sub>03</sub>
					</td>
					<td width="80"></td>
					<td width="51" style="height: 200px;"><svg id="barcode"></svg></td>
				</tr>
			</table>
		</form>
		<div class="Print">
			<button class="print-btn" v-on:click="btnClickPrint">
				<span>{{ msg }}</span>
			</button>
		</div>
		<input v-model="user" type="text" />
		<input v-model="message" type="text" />
		<button @click="sendAll">发送全部</button>
	</basic-container>
</template>

<script>
import * as signalR from '@aspnet/signalr';
import { getLodop } from '../../util/LodopFuncs.js';

import {
	getToken
} from '@/util/auth';
import JsBarcode from 'jsbarcode';
export default {
	name: 'Print',
	data() {
		return {
			user: '', //用户
			message: '', //消息
			connection: '', //signalr连接
			messages: [], //返回消息
			msg: '点击按钮打印'
		};
	},
	created() {
		this.connection = new signalR.HubConnectionBuilder()
			.withUrl('http://www.jooand.com:9005/msgHub?token='+getToken(), {
				skipNegotiation: true,
				transport: signalR.HttpTransportType.WebSockets
			})
			.configureLogging(signalR.LogLevel.Information)
			.build();
		this.connection.on('ReceiveMessage', (message)=> {
			//this.message =message;
			console.log(message);
		});
		this.connection.start();
	},
	mounted() {
		this.barcode();
	},
	methods: {
		//给全部发送消息
		sendAll() {
			this.connection.invoke('SendMessage', this.message).catch(function(err) {
				return console.error(err);
			});
		},
		barcode() {
			JsBarcode('#barcode', 'Hi world!', {
				format: 'CODE128', //选择要使用的条形码类型
				text: '012345678',
				displayValue: true, //是否在条形码下方显示文字
				textPosition: 'top' //设置文本的垂直位置
			});
		},
		btnClickPrint: function() {
			let LODOP = getLodop(); //调用getLodop获取LODOP对象
			LODOP.PRINT_INIT('');
			//LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印内容")
			LODOP.ADD_PRINT_HTM(88, 40, '100%', '100%', document.getElementById('form1').innerHTML);
			//LODOP.ADD_PRINT_BARCODE(50, 231, 200, 200, "QRCode", "打印内容")
			LODOP.PREVIEW();
		}
	}
};
</script>

<style></style>
